<template>
  <Card class="pa5" dis-hover v-if="value">
    <Select :value="value.comType" @on-change="changeComType">
      <Option v-for="item in sourceCom" :value="item.key" :key="item.key">{{ item.value }}</Option>
    </Select>
    <div style="width:100%;" v-if="value.comType==='Select'|| value.comType==='Radio'|| value.comType==='Checkbox'">

      <div class="select-form ">
        <div class="select-item">
          <label class="label">
            <span class="red"> *</span>
            <span class="ml5"> 数据源类型</span>
          </label>
          <div class="item-com">
            <RadioGroup :value="value.interfaceType" @on-change="changeInterfaceType">
              <Radio :label="item.key" :key="item.key" v-for="item in sourceType">
                <span>{{ item.value }}</span>
              </Radio>
            </RadioGroup>
          </div>

        </div>

        <div v-if="value.interfaceType==='接口'">
          <div class="select-item">
            <label class="label">
              <span class="red"> *</span>
              <span class="ml5">选择model</span>
            </label>
            <div class="item-com">

              <Select :value="value.modelKey" placeholder="请选择model" @on-change="changeModel">
                <Option v-for="item in modelRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
              </Select>
            </div>

          </div>

          <div class="select-item">
            <label class="label">
              <span class="red"> *</span>
              <span class="ml5">key(映射)</span>
            </label>
            <div class="item-com">
              <Select :value="value.modelMap.key" placeholder="请选择字段" @on-change="changeKey">
                <Option v-for="item in fieldRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
              </Select>
            </div>

          </div>

          <div class="select-item">
            <label class="label">
              <span class="red"> *</span>
              <span class="ml5">value(映射)</span>
            </label>
            <div class="item-com">
              <Select :value="value.modelMap.value" placeholder="请选择字段" @on-change="changeValue">
                <Option v-for="item in fieldRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
              </Select>
            </div>

          </div>
        </div>

        <div v-else>
          <div class="bd tag-box">
            <Tag v-for="item in value.localData" :key="item.key" :name="item.name" closable @on-close="handleClose(item.key)">{{ item.key+':'+item.value }}</Tag>
          </div>

          <div class="mt5">
            <Input :max="10" :min="1" v-model="localVal.key" type="number" size="small" placeholder="输入key" style="width: 60px"></Input>
            <Input class="ml5" v-model="localVal.value" size="small" placeholder="输入value" style="width: 80px" />
            <Button class="ml10" size="small" @click="handleAdd">添加数据</Button>
          </div>
        </div>
      </div>
    </div>
    <div v-else></div>
  </Card>
</template>

<script>
import modelServer from '@/api/system_high/modelServer'
import modelFieldServer from '@/api/system_high/modelFieldServer'

export default {
  props: ['value'],
  data() {
    return {
      localData: [],
      localVal: { key: 0, value: '' },
      sourceCom: [
        { key: 'Input', value: '文本输入框-Input', default_option: { data_type: 'STRING', data_length: 50 } },
        { key: 'TextArea', value: '文本区域框-TextArea', default_option: { data_type: 'STRING', data_length: 500 } },
        { key: 'InputNumber', value: '数字输入框-InputNumber', default_option: { data_type: 'INTEGER', data_length: 11, defaultValue: 0 } },
        { key: 'i-switch', value: '开关-Switch', default_option: { data_type: 'BOOLEAN', data_length: 2 } },
        { key: 'Radio', value: '单选框-Radio', default_option: { data_type: 'INTEGER', data_length: 2 } },
        { key: 'Select', value: '下拉选择器-Select', default_option: { data_type: 'STRING', data_length: 50 } },
        { key: 'Checkbox', value: '多选框-Checkbox', default_option: { data_type: 'INTEGER', data_length: 11 } },
        { key: 'DatePicker', value: '日期选择器-DatePicker', default_option: { data_type: 'DATE', data_length: 50 } },
        { key: 'Editor', value: '富文本-Editor', default_option: { data_type: 'TEXT', data_length: 0 } },
        { key: 'UploadSingle', value: '图片框-UploadSingle', default_option: { data_type: 'STRING', data_length: 1000 } },
      ],
      sourceType: [
        { key: '接口', value: '接口' },
        { key: '本地数据', value: '本地数据' },
      ],
      modelRows: [],
      fieldRows: [],
    }
  },
  computed: {
    comType() {
      return this.value.comType
    },
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      await this.getModel()
      await this.getField()
    },
    handleClose(key) {
      const index = this.localData.findIndex((p) => p.key === key)
      this.localData.splice(index, 1)
      let { comType, localData } = this
      let newVal = Object.assign({}, this.value, { comType, localData })
      this.$emit('input', newVal)
    },
    handleAdd() {
      if ((this.localVal.key || this.localVal.key === 0) && this.localVal.value) {
        const index = this.localData.findIndex((p) => p.key === this.localVal.key)
        if (index === -1) {
          this.localData.push(this.localVal)
          let { comType, localData } = this
          let newVal = Object.assign({}, this.value, { comType, localData })
          this.$emit('input', newVal)
          this.localVal = { key: this.localData.length, value: '' }
        } else {
          this.$Message.error('不能添加重复项')
        }
      } else {
        this.$Message.error('请输入值')
      }
    },

    async getField() {
      this.$nextTick(async () => {
        if (this.value) {
          let key = this.value.modelKey
          if (key) {
            let res = await modelFieldServer.allByKey({ key })
            let data = res.data.map((p) => {
              let { key, name } = p
              return { key, value: key }
            })

            this.fieldRows = [{ key: 'id', value: 'id' }, ...data]
          }
        }
      })
    },
    async getModel() {
      let res = await modelServer.all()
      this.modelRows = res.data.map((p) => {
        let { key, name } = p
        return { key, value: key + '-' + name }
      })
    },

    changeComType(val) {
      let remoteKeys = ['Select', 'Radio', 'Checkbox']
      let newRow = { comType: val }
      if (remoteKeys.indexOf(val) > -1) {
        newRow = Object.assign(newRow, { interfaceType: '接口', modelKey: '', modelMap: { key: 'id', value: 'name' } })
      }

      this.$emit('input', newRow)
      let com = this.sourceCom.find((p) => p.key === val)
      if (com && com.default_option) {
        this.$emit('changeOption', com.default_option)
      }
    },
    changeModel(val) {
      let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { modelKey: val })
      this.$emit('input', newRow)
      this.getField()
    },

    changeInterfaceType(val) {
      if (val === '接口') {
        let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { interfaceType: val })
        this.$emit('input', newRow)
      } else {
        let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { interfaceType: val })
        console.log(newRow, val)
        this.$emit('input', newRow)
      }
    },
    changeKey(val) {
      let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value)
      newRow.modelMap.key = val
      this.$emit('input', newRow)
    },
    changeValue(val) {
      let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value)
      newRow.modelMap.value = val
      this.$emit('input', newRow)
    },
  },
}
</script>

<style lang="less" scoped>
.select-form {
  display: flex;
  flex-direction: column;
  padding: 10px;
  .select-item {
    display: flex;
    flex-direction: row;
    margin: 10px 0px;

    .label {
      display: inline-flex;
      width: 100px;
      justify-content: flex-start;
      align-items: center;
      margin-right: 30px;
    }

    .item-com {
      flex: 1;
    }
  }
}

.tag-box {
  line-height: 30px;
  width: 100%;
  height: 70px;
  padding: 5px;
}

.bd {
  border: solid 1px #ccc;
}
</style>